import React, { Component } from "react";
import MainLayout from "../../../../component/mainLayout/mainLayout";
import "./index.scss";
import { Toast } from "antd-mobile/lib";
import yhTools from "../../../../tools/yh";
import xhfConfig from "../../../../config/XHFConfig";
import QuestionMark from "../../../../images/icon/mark.png";

class CashbackBill extends Component {
	constructor(props) {
		super(props);
		this.state = {
			availableAmount: "", // 红包余额
			pageData: []
		};
	}
	componentDidMount() {
		this.prepareData();
	}
	prepareData = () => {
		const params = {
			url: xhfConfig.cashback,
			params: {},
			_alertShow: false
		};
		yhTools.request(params).then(res => {
			const data = res.data;
			if (data) {
				this.setState({
					availableAmount: data.availableAmount, // 红包余额
					pageData: data.cashbackRecordRes || []
				});
			} else {
				Toast.info(res.message, 2);
			}
		});
	};
	jumpRule = () => {
		this.props.history.push("/couponRule");
	};
	render() {
		const _pageParams = {
			header: {
				title: "我的红包",
				goBackAction: () => {
					this.props.history.push({
						pathname:
							sessionStorage["name"] && sessionStorage["name"] == "xhqb"
								? "/xhqbIndex"
								: "/xhfHomeCredit"
					});
					sessionStorage.removeItem("name");
				}
			},
			history: this.props.history,
			cacheLifecycles: this.props.cacheLifecycles
		};

		const { availableAmount, pageData } = this.state;

		return (
			<MainLayout pageParams={_pageParams}>
				<div className="cash-back-list-container">
					<div className="top bg-white">
						<p
							className="font-grey icon-mark-container"
							onClick={this.jumpRule}
						>
							红包余额(元)
							<img src={QuestionMark} alt="" className="icon-mark" />
						</p>
						<p className="amount">{availableAmount}</p>
					</div>
					{!!pageData.length && (
						<div className="list bg-white">
							{pageData.map((item, key) => (
								<div className="item" key={key}>
									<div>
										<p className="font-normal">{item.shopName}</p>
										<p className="font-grey">{item.cashbackTypeDesc}</p>
									</div>
									<div className="right">
										<p className="font-normal">{item.cashbackMoney}</p>
										<p className="font-grey">{item.cashbackDate}</p>
									</div>
								</div>
							))}
						</div>
					)}
				</div>
			</MainLayout>
		);
	}
}

export default CashbackBill;
